<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#b{width: 10000px;height: 10000px;padding-top: 100px;background: #17ee00;}
			body {
			  display: flex;
			  justify-content: space-around;
			  padding: 20px;
			}
			.flip-box {
			  width: 200px;
			  height: 200px;
			  perspective: 1000px;
			  margin: 20px;
			}
			
			.auto-flip {
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  animation: flipY 1s ease forwards;
			}
			
			.auto-flip-3d {
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  transform-style: preserve-3d;
			  animation: flipY3d 1s ease forwards;
			}
			
			@keyframes flipY {
			  from { transform: rotateY(0deg); }
			  to { transform: rotateY(180deg); }
			}
			
			@keyframes flipY3d {
			  from { transform: rotateY(0deg); }
			  to { transform: rotateY(180deg); }
			}
		</style>
	</head>
	<body>
		<div id="b">
			<div>
			  <h3>3D效果自动翻转</h3>
			  <div class="flip-box">
			    <img src="./img/I drive.jpg" class="auto-flip-3d" alt="3D自动翻转示例">
			  </div>
			</div>
		</div>
	</body>
</html>